
@font-face {
  font-family: 'SHS-Bold';
  src: url('@/assets/fonts/SourceHanSansCN-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'SHS-Medium';
  src: url('@/assets/fonts/SourceHanSansCN-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'PingFang-Heavy';
  src: url('@/assets/fonts/PingFang-Heavy.ttf') format('opentype');
}
@font-face {
  font-family: 'PingFang-Bold';
  src: url('@/assets/fonts/PingFang-Bold.ttf') format('opentype');
}
@font-face {
  font-family: 'PingFang-Medium';
  src: url('@/assets/fonts/PingFang-Medium.ttf') format('opentype');
}
@font-face {
  font-family: 'D-DIN-Bold';
  src: url('@/assets/fonts/D-DIN-Bold.otf') format('opentype');
}
.jzt-shs-bold{
  font-family: 'SHS-Bold' !important;
}
.jzt-shs-medium{
  font-family: 'SHS-Medium' !important;
}
.jzt-pf-heavy{
  font-family: 'PingFang-Heavy' !important;
}
.jzt-pf-bold{
  font-family: 'PingFang-Bold' !important;
}
.jzt-pf-medium{
  font-family: 'PingFang-Medium' !important;
}
.jzt-din-bold{
  font-family: 'D-DIN-Bold' !important;
}

* {
  font-family: 'jzt-pf-medium';
}
:root {
  --el-color-primary-light-9: white;
  --el-border-radius-base: 4px;
  --el-color-primary-light-5: #1A1A1A;
  --el-color-primary: #1A1A1A;
  --el-button-hover-bg-color: #1A1A1A;
  --el-button-hover-border-color: white;

}
.el-button.is-disabled,.el-button.is-disabled:hover{
  --el-button-disabled-bg-color: #86909C !important;
  --el-button-disabled-border-color: #86909C !important;
}
.el-button:hover{
  --el-button-hover-bg-color: #1A1A1A !important;
  --el-button-hover-border-color: #1A1A1A !important;
}
.el-input,.el-input__wrapper{
  --el-input-bg-color: #F2F3F5;
  --el-disabled-bg-color: white;
  --el-disabled-text-color: #1A1A1A;
  --el-input-border-color:#F2F3F5;
}
.el-button--danger.is-link{
  --el-color-danger: #ff3333;
}
.el-form-item__content > div .el-input__wrapper{
  box-shadow: 0 0 0 1px #F2F3F5 inset !important;
}
// ==============================================
.el-select,.el-select__wrapper{
  --el-fill-color-light: #F2F3F5;
  --el-fill-color-blank: #F2F3F5;
  --el-border-color: #F2F3F5;
}
.el-select__wrapper.is-disabled{
  --el-fill-color-light: white;
  --el-text-color-placeholder: #1A1A1A;  
  --el-select-disabled-color: #1A1A1A;
  --el-select-disabled-border: #F2F3F5;
}
.el-form-item__content > div .el-select__wrapper.is-disabled{
  box-shadow: 0 0 0 1px #F2F3F5 inset !important;
}
.el-form-item__content > div .el-select__wrapper {
  box-shadow: none !important;
}
// ===============================================
.el-textarea__inner {
  --el-input-bg-color: #F2F3F5;
  --el-input-border-color: #F2F3F5;
  --el-input-hover-border-color: #F2F3F5;
  &:focus{
    --el-input-focus-border-color: #F2F3F5;
  }
}
// ===============================================
.el-upload--picture-card{
  border: none !important;
  --el-fill-color-lighter: #f2f3f5;
  &>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #86909c;
    height: 100%;
    width: 100%;
    padding-top: 16px;
    box-sizing: border-box;
    &.notuse {
      cursor: not-allowed;
    }
  }
}
.el-upload-list__item{
  overflow: visible !important;
  background-color: #DEEBFF;
  line-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  &>div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &:hover{
    --el-fill-color-light: #DEEBFF;
  }

  .el-icon--close{
    display: block !important;
    opacity: 1 !important;
    padding-right: 10px !important;
    --el-text-color-regular: #86909C;    
  }
  .el-upload-list__item-name{
    --el-text-color-regular: #007DFF;
    .el-upload-list__item-file-name{
      flex: 1 !important;
      text-align: left !important;
    }
    .el-icon{
      --el-text-color-secondary: #007DFF;
      background-image: url('@/assets/images/link.png');
      background-size: 100% 100%;
      width: 12px !important;
      height: 12px !important;
      svg{
        display: none !important;
      }
    }
  }
 
}
.el-upload-list__item-status-label{
  display: none !important;
}
.el-upload-list--picture-card {
  .el-upload-list__item{
    border: none !important;
  }
  .el-upload-list__item-thumbnail{
    object-fit: fill;
  }
  .el-upload-list__item-actions{
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    --el-overlay-color-lighter: red;
    background-image: url('@/assets/images/del-icon.png');
    background-size: 100% 100%;
    opacity: 1 !important;
    top: -2px !important;
    right: -2px !important;
    left: auto !important;
    .el-upload-list__item-delete{
      display: block;
      width: 10px !important;
      height: 10px !important;
      right: 0 !important;
      position: relative !important;
      transform: rotate(45deg) !important;
      .el-icon,svg{
        display: none !important;
      }
    }
  }
}
.el-upload-dragger{
  --el-border-color: #606266;  
}
.upload-card.upload-video {
  .el-upload-list__item.is-ready,.el-upload-list__item.is-success {
    width: 125px !important;
  }
}







// =========================================

.factory-container{
  background-color: white;
  border-radius: 10px;
  padding: 20px;
}

.upload-card{
  .el-upload.el-upload--picture-card{
    width: 80px !important;
    height: 80px !important;
  }
  .el-upload-list__item.is-ready,.el-upload-list__item.is-success{
    width: 80px !important;
    height: 80px !important;
  }
}

.el-select__wrapper,.el-input__wrapper{
  background: #F2F3F5 !important;
}

.jzt-pagination{
  &.el-pagination.is-background{
    .el-input__wrapper,.el-select__wrapper{
      background-color: white !important;
      --el-input-border-radius: 4px;
    }
    .el-pager li,.btn-prev,.btn-next{
      --el-pagination-border-radius: 4px;
      box-shadow: 0px 3px 8px 0px rgba(4,19,74,0.04);
      --el-pagination-bg-color: white;
      --el-pagination-button-bg-color: white;
    }
    .el-pager li.is-active{
      --el-color-primary: #424E66;
    }
   
  }
}

.jzt-searchkey-com.el-input{
  border-radius: 16px !important;
  .el-input__wrapper{
    border-radius: 16px !important;
    box-shadow: 0px 4px 10px 0px rgba(220, 223, 230, 0.5) !important;
  }
  .el-input-group__append{
    position: absolute !important;
    top: 1px !important;
    right: 5px !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    height: 30px !important;
    min-height: auto !important;

    button{
      border: none;
      background-color: #4E5969 !important;
      border-radius: 16px !important;
      color: white !important;
      font-size: 12px !important;
      width: 68px !important;
    }
  }
}
.jzt-table.el-table{
  border: 1px solid #E1E6ED !important;
  &::before{
    height: 0 !important;
  }
  .el-table__cell{
    border-right: 1px solid #E1E6ED !important;
    .el-input__wrapper,.el-select__wrapper{
      background-color: white !important;
      border: 1px solid #DCDFE6 !important;
    }
  }
  .el-table__empty-block{
    min-height: 300px;
    width: 100% !important;
  }
  th.el-table__cell{
    background-color: #EBEEF1 !important;
    border-bottom: 1px solid #E1E6ED !important;
    color: #909399;
    font-weight: normal;
  }
  .el-table.is-scrolling-none th.el-table-fixed-column--right,
  .el-table.is-scrolling-none th.el-table-fixed-column--left{
    background-color: #EBEEF1 !important;
  }
  .el-table__body tr.el-table__row--striped td.el-table__cell{
    background-color: #F6F6F6 !important;
  }
  .el-table__cell{
    padding: 14px 0 !important;
  }
  td.el-table__cell{
    border-bottom: 1px solid #E1E6ED !important;
  }
  .el-table__row:last-of-type{
    .el-table__cell{
      // border-bottom-color: transparent !important;
    }
  }
  .el-table__inner-wrapper::before{
    height: 0 !important;
  }
}

.jzt-input-number.el-input-number.is-controls-right{
  .el-input-number__decrease,
  .el-input-number__increase {
    display: none !important;
    text-align: center !important;
  }
  .el-input__inner {
    text-align: left !important;
  }
  &:hover{
    .el-input-number__decrease,
    .el-input-number__increase {
      display: block !important;
    }
  }
  &.jzt-input-number-hidden{
    position: relative;
    .el-input__wrapper{
      padding-right: 20px !important;
    }
    &.suffix{
      .el-input__wrapper::after{
        position: absolute;
        content: '%';
        color: #1a1a1a;
        right: 10px;
        font-size: 12px;
      }
    }
    &:hover{
      .el-input-number__decrease,
      .el-input-number__increase {
        display: none !important;
      }
    }
  }
}

.jzt-drawer.el-drawer{
  box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
  border-radius: 10px 0px 0px 10px;
}
.jzt-tag.el-tag{
  &.el-tag--plain.el-tag--warning{
    --el-color-warning-light-5:#FA9550;
    --el-color-warning: #FA9550;
  }
  &.el-tag--plain.el-tag--danger{
    --el-color-warning-light-5: red;
    --el-color-warning: red;
  }
}

.sticky-block{
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}

.text-over {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-break{
  white-space: break-spaces;
  word-break: break-all
}

.yyx-btn{
  &.el-button:hover {
    background-color: #F2F3F5  !important;
    border-color: #F2F3F5 !important;
    color: #1D2129;
    outline: none;
  }
  &.el-button--primary{
    background-color: #424E66 !important;
    border-color: #424E66 !important;
    &:hover{
      background-color: #424E66 !important;
      border-color: #424E66 !important;
      color: white !important;
    }
  }
}
.jzt-text-center{
  text-align: center;
}
.jzt-flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jzt-flex-bt{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jzt-flex-start{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.jzt-flex-end{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.jzt-cursor-point{
  cursor: pointer;
}

.jzt-cursor-point{
  cursor: pointer;
}


@for $i from 12 through 60 {
  .f#{$i} {
    font-size: $i * 1px !important;
  }
}
@for $i from 0 through 200 {
  .pd#{$i} {
    padding: $i * 1px !important;
  }
  .pt#{$i} {
    padding-top: $i * 1px !important;
  }
  .pb#{$i} {
    padding-bottom: $i * 1px !important;
  }
  .pl#{$i} {
    padding-left: $i * 1px !important;
  }
  .pr#{$i} {
    padding-right: $i * 1px !important;
  }
}
@for $i from 0 through 200 {
  .mg#{$i} {
    margin: $i * 1px !important;
  }
  .mt#{$i} {
    margin-top: $i * 1px !important;
  }
  .mb#{$i} {
    margin-bottom: $i * 1px !important;
  }
  .ml#{$i} {
    margin-left: $i * 1px !important;
  }
  .mr#{$i} {
    margin-right: $i * 1px !important;
  }
}
